<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Vancouver Tongue</title>
<link href="/VancouverTongue/static/style.css" type="text/css"
	rel="stylesheet">
<link rel="shortcut icon" href="/VancouverTongue/static/icon.png">
<style type="text/css">
#left {
	float: left;
	padding: 5px;
	width: 690px;
	background-color: white;
	box-shadow: 10px 10px 5px #888;
}

.right {
	box-shadow: 10px 10px 5px #888;
	margin: 0 0 10px 10px;
	padding: 10px 0 10px 10px;
	float: left;
	background-color: #f5f2ed;
	width: 280px;
}

#gallery img {
	width: 200px;
	height: 300px;
	margin: 5px;
}

#gallery td {
	text-align: center;
	vertical-align: middle;
}

#recomand {
	height: 40px;
}

.recomandButton {
	float: left;
	width: 227px;
	text-align: center;
	background-repeat: repeat-x;
	border: 1px solid #ccc;
	border-width: 1px 0;
	cursor: pointer;
	font-size: 16px;
	padding-top: 8px;
	padding-bottom: 6px;
	display: list-item;
	list-style-position: inside;
	list-style-image: url(static/listIcon.png);
	background-image: url(static/recomandButton.png);
}

.recomandButtonHover {
	float: left;
	width: 227px;
	text-align: center;
	background-repeat: repeat-x;
	border: 1px solid #0c922f;
	border-width: 1px 0;
	cursor: pointer;
	font-size: 16px;
	padding-top: 8px;
	padding-bottom: 6px;
	display: list-item;
	list-style-position: inside;
	list-style-image: url(static/listIcon.png);
	background-image: url(static/naviMid.png);
	color: white;
	text-shadow: 0px -1px black;
}

#recomandLeft {
	border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	border-left-width: 1px;
}

#recomandRight {
	border-radius: 0 5px 5px 0;
	-moz-border-radius: 0 5px 5px 0;
	border-right-width: 1px;
}

.recomRest {
	width: 208px;
	margin: 5px;
	padding: 5px;
	/*border: thin #ccc solid;*/
	float: left;
	height: 260px;
	float: left;
}

.recomRest img {
	width: 208px;
	height: 140px;
}

.recomRest h4 {
	width: 208px;
	margin-bottom: 0.5em;
	word-wrap: break-word;
}

.recomRest .description {
	margin: 0;
	font-size: 14px;
	word-wrap: break-word;
}
</style>
<script type="text/javascript">
	number = Math.floor(Math.random() * 3);
	function recomIdString(rsNumber) {
		if (rsNumber == 0) {
			return "recomandLeft";
		}
		if (rsNumber == 1) {
			return "recomandMid";
		}
		if (rsNumber == 2) {
			return "recomandRight";
		}
		alert('unkonw recom number');
	}
	function restoreRecom(rsNumber) {
		if (rsNumber != number) {
			var target = document.getElementById(recomIdString(rsNumber));
			target.className = 'recomandButton';
			/*target.style['border-color'] = '#ccc';
			target.style['color'] = 'black';
			target.style['text-shadow'] = 'none';
			target.style['background-image'] = 'url('+getImgUrl('recomandButton.png')+')';*/

		}
	}
	function hoverRecom(rsNumber) {
		var target = document.getElementById(recomIdString(rsNumber));
		target.className = 'recomandButtonHover';
		//alert(target.style.className);
		/*target.style['border-color'] = '#0c922f';
		target.style['color'] = 'white';
		target.style['text-shadow'] = ' 0px -1px black';*/
		//target.style['background-image'] = 'url('+getImgUrl('naviMid.png')+')';
		//target.background='static/naviMid.png';
		//alert(target.style['background-image']);
	}
	function clickRecom(clickNumber) {

		number = clickNumber;
		restoreRecom(0);
		restoreRecom(1);
		restoreRecom(2);
		hoverRecom(clickNumber);

		hide('top');
		hide('latest');
		hide('sponsor');
		if (clickNumber == 0) {
			show('latest');
		} else if (clickNumber == 1) {
			show('top');
		} else if (clickNumber == 2) {
			show('sponsor');
		}
	}
	function lenghtCheck() {
		var limit = 90;
		var list = document.getElementsByName("toCheck");
		for ( var i = 0; i < list.length; i++) {
			var tmp = list.item(i);
			var text = tmp.innerHTML;
			if (text.length > limit) {
				tmp.innerHTML = text.slice(0, limit) + '...';
			}
		}
	}
	function show(name) {
		var list = document.getElementsByName(name);
		for ( var i = 0; i < list.length; i++) {
			var tmp = list.item(i);
			tmp.style.display = 'block';
		}
	}
	function hide(name) {
		var list = document.getElementsByName(name);
		//alert('hide '+name+' l='+list.length);
		for ( var i = 0; i < list.length; i++) {
			var tmp = list.item(i);
			tmp.style.display = 'none';
		}
	}
	function pageInit() {
		clickRecom(number);
		lenghtCheck();
	}
</script>
</head>
<body onload="pageInit()">
	<jsp:include page="headTemplate.jsp" />

	<div id="left">
		<table border="0" width="690">
			<tr id="gallery">
				<td><img src="/VancouverTongue/static/g1.jpg" alt="gallery" /></td>
				<td><img src="/VancouverTongue/static/g2.jpg" alt="gallery" /></td>
				<td><img src="/VancouverTongue/static/g3.jpg" alt="gallery" /></td>
			</tr>
			<tr>
				<td colspan="3" id="recomand">
					<div class="recomandButton" id="recomandLeft"
						onclick="clickRecom(0)" onmouseout="restoreRecom(0)"
						onmouseover="hoverRecom(0)">New Restaurant</div>
					<div class="recomandButton" id="recomandMid"
						onclick="clickRecom(1)" onmouseout="restoreRecom(1)"
						onmouseover="hoverRecom(1)">Best Rating</div>
					<div class="recomandButton" id="recomandRight"
						onclick="clickRecom(2)" onmouseout="restoreRecom(2)"
						onmouseover="hoverRecom(2)">Our Sponsor</div>
					<div id="floatBase"></div>
				</td>
			</tr>
			<tr>
				<td colspan="3" id="recomResult"><c:forEach var="rest"
						items="${recomLatest}">
						<div class="recomRest" name="latest">
							<a href="restaurant/${rest.restaurantId }"><img
								alt="recomand" src="${rest.image}"></a>
							<h4>${rest.restaurantName}</h4>
							<div class="description" name="toCheck">${rest.description}</div>
						</div>
					</c:forEach> <c:forEach var="rest" items="${recomTop}">
						<div class="recomRest" name="top">
							<a href="restaurant/${rest.restaurantId }"><img
								alt="recomand" src="${rest.image}"></a>
							<h4>${rest.restaurantName}</h4>
							<div class="description" name="toCheck">${rest.description}</div>
						</div>
					</c:forEach> <c:forEach var="rest" items="${recomSponsor}">
						<div class="recomRest" name="sponsor">
							<a href="restaurant/${rest.restaurantId }"><img
								alt="recomand" src="${rest.image}"></a>
							<h4>${rest.restaurantName}</h4>
							<div class="description" name="toCheck">${rest.description}</div>
						</div>
					</c:forEach>
					<div id="floatBase"></div></td>
			</tr>
		</table>
	</div>
	<div class="right">
		<jsp:include page="searchTemplate.jsp" />
	</div>
	
	<div class="right">
		<form class="register" action="/VancouverTongue/register/temp"
			method="post">
			<dl>
				<dt>User Id*:</dt>
				<dd>
					<input type="text" name="userId" maxlength="15" />
				</dd>
				<dt>Password*:</dt>
				<dd>
					<input type="password" name="password" maxlength="20" />
				</dd>
				<dt>Confirm Password*:</dt>
				<dd>
					<input type="password" name="passwordRep" maxlength="20" />
				</dd>
				<dt>Email*:</dt>
				<dd>
					<input type="text" name="email" maxlength="55" />
				</dd>
				<dt>
					<input type="image" src="/VancouverTongue/static/register.png" /><input
						type="hidden" name="description" value="to be added" />
				</dt>

			</dl>


		</form>
		
	</div>
	
	<div class="right">
		<p>Recent Event:</p>
		<p>Date:</p>
		<p>Location:</p>	
	</div>
	
	<div style="clear: both; padding-top: 20px;">
		Restaurant inforamtion and images found from <a
			href="/VancouverTongue/static/link.txt">these links</a>
	</div>

	${alertBox} ${registerSucc}
</body>
</html>